<script setup>

import VTable from "../../components/table/VTable.vue";
import {ref} from "vue";

const tableDemoRef = ref(null);
const multipleTableDemoRef = ref(null);

const getData = (type) => {
  if (type !== 'multiple') {
    tableDemoRef.value.getTableData()
  } else {
    multipleTableDemoRef.value.getTableData()
  }
}
const reload = (type) => {
  if (type !== 'multiple') {
    tableDemoRef.value.loadTable()
  } else {
    multipleTableDemoRef.value.loadTable()
  }
};
const getMultipleSelection = () => {
  console.log('多选数据：', multipleTableDemoRef.value.getMultipleSelection())
}
</script>

<template>
  <div>
    <h2>表格组件</h2>
    <v-table ref="tableDemoRef" url="/api/table/data/get">
      <el-table-column prop="id" label="ID"/>
      <el-table-column prop="name" label="姓名"/>
      <el-table-column prop="age" label="年龄"/>
      <el-table-column prop="sex" label="性别"/>
    </v-table>
    <div>
      <el-button @click="getData">获取表格数据</el-button>
      <el-button @click="reload('')">重新加载表格</el-button>
    </div>
    <h2>多选表格组件</h2>
    <v-table ref="multipleTableDemoRef" url="/api/table/data/post" multiple post>
      <el-table-column prop="id" label="ID"/>
      <el-table-column prop="name" label="姓名"/>
      <el-table-column prop="age" label="年龄"/>
      <el-table-column prop="sex" label="性别"/>
    </v-table>
    <div>
      <el-button @click="getData('multiple')">获取表格数据</el-button>
      <el-button @click="getMultipleSelection">获取多选数据</el-button>
      <el-button @click="reload('multiple')">重新加载表格</el-button>
    </div>
  </div>
</template>

<style scoped>

</style>